<template>
  <div class="create-sop-main">
    <NavigationBarBack title="创建标准SOP" />
    <div class="create-sop-wrap">
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基本设置</div>
          </div>
          <div class="card-body">
            <div class="alter-box">
              <div class="warning-svg">
                <svg-icon class-name="warning-svg" icon-class="warning" />
              </div>
              <div class="waring-text">
                <div>手动创建SOP任务，创建完成后下发至单号模式下发送</div>
              </div>
            </div>
            <el-form
              ref="form"
              :model="form"
              label-width="120px"
              size="small"
              class="create-sop-form"
              label-position="left"
            >
              <el-form-item label="所属公司：">
                <div class="company-name">安徽志新科技有限公司</div>
              </el-form-item>
              <el-form-item label="下发企微号：">
                <el-button
                  plain
                  icon="el-icon-plus"
                  size="small"
                  @click="handleWechat"
                  >选择企微号</el-button
                >
              </el-form-item>
              <el-form-item label="发送对象：">
                <div class="control-content">
                  <div class="head">
                    <div class="checkbox">
                      <el-checkbox v-model="customer"
                        ><span style="color: #000">客户</span></el-checkbox
                      >
                      <div v-if="customer" class="radio-content">
                        <el-radio-group v-model="form.customer">
                          <el-radio :label="0"
                            ><span style="color: #000">所有客户</span></el-radio
                          >
                          <el-radio :label="1"
                            ><span style="color: #000">筛选客户</span></el-radio
                          >
                        </el-radio-group>
                      </div>
                    </div>
                    <div>
                      <span style="color: #3070ff; cursor: pointer"
                        >点此计算可见客户数</span
                      >
                      <el-tooltip class="item" effect="dark" placement="top">
                        <div slot="content">
                          此处计算得出的是当前符合所选条件<br />的客户数，仅供参考，最终触达客<br />户数以群发后实际触达人数为准
                        </div>
                        <svg-icon
                          icon-class="question"
                          style="margin-left: 4px"
                        />
                      </el-tooltip>
                    </div>
                  </div>
                  <div v-if="customer" class="body">
                    <div
                      class="tc-secondary"
                      style="color: rgba(0, 0, 0, 0.25)"
                      v-if="form.customer === 0"
                    >
                      <svg-icon icon-class="warning-border" />
                      选中企微号的所有客户
                    </div>
                    <ConditionForm v-else />
                  </div>
                </div>
                <div class="control-content">
                  <div class="head">
                    <div class="checkbox">
                      <el-checkbox v-model="customer"
                        ><span style="color: #000">客户群</span></el-checkbox
                      >
                      <div v-if="customer" class="radio-content">
                        <el-radio-group v-model="form.customerGroup">
                          <el-radio :label="0"
                            ><span style="color: #000"
                              >所有客户群</span
                            ></el-radio
                          >
                          <el-radio :label="1"
                            ><span style="color: #000"
                              >筛选客户群</span
                            ></el-radio
                          >
                        </el-radio-group>
                      </div>
                    </div>
                  </div>
                  <div v-if="customer" class="body">
                    <div
                      class="tc-secondary"
                      style="color: rgba(0, 0, 0, 0.25)"
                      v-if="form.customerGroup === 0"
                    >
                      <svg-icon icon-class="warning-border" />
                      选中企微号的所有客户群
                    </div>
                    <ConditionGroupForm v-else />
                  </div>
                </div>
              </el-form-item>
              <div class="flex">
                <el-form-item label="效果追踪：">
                  <el-switch size="small" v-model="form.switch" />
                </el-form-item>
                <el-form-item
                  v-if="form.switch"
                  label=""
                  label-width="0"
                  class="pl-12"
                >
                  <el-input v-model="form.minutes" style="width: 88px" />
                  分钟内的回复/流失，计入回复率/流失率统计
                  <el-tooltip class="item" effect="light" placement="top-start">
                    <template slot="content">
                      <div>
                        1.
                        每个对象每日每条消息发送后，在设置的统计时效内客户有发消息即算已回复
                      </div>
                      <div>
                        2.
                        如有设置回复打标签，在时效内，已回复的客户会自动打上对应的标签
                      </div>
                      <div>
                        3.
                        每个对象每日每条消息发送后，在设置的统计时效内流失的客户算流失，时效外流失的不计流失
                      </div>
                      <div>
                        4.
                        关闭后历史数据清零，重新开启后，新触发的对象进行统计，已打标签不删除
                      </div>
                      <div>
                        5. 回复率/流失率统计/打标签仅对私聊对象生效，群聊不统计
                      </div>
                    </template>
                    <span class="c_primary commhover">统计规则</span>
                  </el-tooltip>
                </el-form-item>
              </div>
              <el-form-item label="SOP模版：">
                <el-select
                  v-model="form.labeltype"
                  placeholder=""
                  size="small"
                  style="width: 115px"
                >
                  <el-option label="企业模板库" :value="1"></el-option>
                  <el-option label="个人模板库" :value="2"></el-option>
                </el-select>
                <sop-select v-model="form.labeltype" :list='standList' type='info' />
                <!-- <el-select
                  v-model="form.labeltype"
                  placeholder=""
                  size="small"
                  style="width: 340px"
                >
                  <el-option label="含任意关键词" :value="0">
                    <span class="select-label">11111</span>
                    <span class="select-tag">标准模板</span>
                  </el-option>
                  <el-option label="含任意关键词" :value="1">
                    <span class="select-label">11111</span>
                    <span class="select-tag">标准模板</span>
                  </el-option>
                </el-select> -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="创建新模板"
                  placement="top"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="small"
                    @click="onNavigationTo('/market/sop/template?type=1')"
                    style="margin-left: 8px"
                  />
                </el-tooltip>
                <div class="desc">标准SOP只能调用“标准模板”</div>
              </el-form-item>
              <el-form-item label="">
                <div class="sopcontent">
                  <div class="sopheader pl-16">
                    <el-checkbox v-model="form.checked"></el-checkbox>
                    从
                    <el-select v-model="form.day" style="width: 100px">
                      <el-option label="第一天" :value="1"></el-option>
                      <el-option label="第二天" :value="2"></el-option>
                    </el-select>
                    任务开始发送
                  </div>
                  <sop-content :planList="form.planList" />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="create-sop-footer">
      <el-button size="small" plain>取消</el-button>
      <el-button size="small" type="primary">确定</el-button>
    </div>
    <!-- 选择企微号 -->
    <SelectWechat
      v-if="showEwechat"
      :visableIf.sync="showEwechat"
      width="670px"
      :showRecord="false"
      :showWarning="true"
    />
  </div>
</template>
<script>
import NavigationBarBack from "@/components/NavigationBarBack";
import ConditionForm from "../components/conditionForm";
import ConditionGroupForm from "../components/conditionGroupForm.vue";
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";
import SopContent from '../components/SopContent.vue';
import SopSelect from './components/SopSelect.vue';

export default {
  data() {
    return {
      customer: 0,
      form: {
        customer: 0,
        customerGroup: 0,
        switch: false,
        labeltype: 1,
        day: 1,
        planList: [
          { id: 1, content: "" },
          { id: 2, content: "" },
        ],
      },
      active: 1,
      showEwechat: false,
      standList:[
        {value:1,label:'我的模板1',tag:'群模板'},
        {value:2,label:'我的模板2',tag:'群模板'},
      ]
    };
  },
  components: {
    NavigationBarBack,
    ConditionForm,
    ConditionGroupForm,
    SelectWechat,
    SopContent,
    SopSelect,
  },
  methods: {
    handleWechat() {
      this.showEwechat = true;
    },

    onNavigationTo(path) {
      this.$router.push(path);
    },

    handleItem(item){
      this.active = item.id
    }
  },
};
</script>
<style lang="scss" scoped>
.create-sop-main {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;
  .create-sop-wrap {
    margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
        }

        .card-body {
          padding: 24px;

          .alter-box {
            box-sizing: border-box;
            margin: 0;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            background-color: #f0f7ff;
            border: 1px solid #abceff;
            font-variant: tabular-nums;
            line-height: 24px;
            position: relative;
            display: flex;
            padding: 8px 15px;
            word-wrap: break-word;
            border-radius: 4px;

            .warning-svg {
              font-size: 18px;
            }

            .waring-text {
              margin-left: 8px;
            }
          }

          .create-sop-form {
            margin-top: 20px;
            .control-content {
              width: calc(100% - 150px);
              color: rgba(0, 0, 0, 0.65);
              font-size: 14px;
              font-variant: tabular-nums;
              line-height: 1.5715;
              margin-top: 20px;
              .head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 46px;
                background: #f5f6f7;
                border-radius: 2px;
                border: 1px solid #e9e9e9;
                padding: 0 16px;
                .checkbox {
                  display: flex;
                  align-items: center;
                  .radio-content {
                    margin-left: 24px;
                    padding: 4px 16px;
                    border-radius: 16px;
                    background-color: #fff;
                    border: 1px solid #e9e9e9;
                  }
                }
              }
              .body {
                padding: 16px;
                line-height: 22px;
                border: 1px solid #e9e9e9;
                border-top: none;
              }
            }
            .desc {
              color: rgba(0, 0, 0, 0.45);
              font-size: 12px;
              margin: 8px 0px 12px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
  .create-sop-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
// .select-label {
//   float: left;
//   color: rgba(0, 0, 0, 0.65);
//   font-weight: 400;
//   font-size: 12px;
//   cursor: pointer;
// }
// .select-tag {
//   line-height: 20px;
//   white-space: nowrap;
//   background: #fafafa;
//   border: 1px solid #e9e9e9;
//   border-radius: 4px;
//   padding: 2px 7px;
//   float: right;
//   font-weight: 400;
//   color: rgba(0, 0, 0, 0.65);
//   font-size: 12px;
//   margin: auto;
// }
.sopcontent {
  border: 1px solid #e9e9e9;
  .sopheader {
    border-bottom: 1px solid #e9e9e9;
    height: 48px;
    line-height: 48px;
  }
}
</style>